<template>
  <el-button
    id="jurisdiction-btn"
    :class="BtntType"
    :size="size"
    :disabled="disabled"
    v-if="(tPermission ? (jurisdiction.indexOf(tPermission) > -1) : true)"
    :name="tData"
    v-bind="$attrs"
    @click="tClick"
    ref="Jurisdiction_btn"
  >{{tName}}</el-button>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'jurisdiction',
  props: {
    size: {
      type: String,
      default: 'mini'
    },
    tName: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    BtntType: {
      type: String,
      default: ''
    },
    tData: {
      type: String,
      default: null
    },
    tClick: {
      type: Function,
      default: null
    },
    tPermission: {
      type: String
    }
  },
  computed: {
    ...mapGetters(['jurisdiction'])
  },
  methods: {
    nameValue() {
      //这里是为了填坑  因为引用这个组件用e.target去获取name的，缓存el-button里面多了子元素 所以循环加上name保证原有业务
      let btn = this.$refs.Jurisdiction_btn
      if (btn) {
        //补没填好的坑
        let children = btn.$el.children
        Array.from(children).forEach(v => {
          v.name = this.tData
        })
      }
    }
  },
  mounted() {
    this.nameValue()
  },
  watch: {
    tData: 'nameValue'
  }
}
</script>
<style lang="scss" scope>
// #jurisdiction-btn {
//   border-radius: 3px;
//   font-size: 12px;
//   cursor: pointer;
//   height: 28px;
//   text-align: center;
//   line-height: 28px;
//   font-weight: 500;
//   outline: none;
//   padding: 0px 12px;
// }
// .primary-btn {
//   color: #fff;
//   background: #3a86ff;
//   border: none;
// }
// .normal-btn {
//   background: #fff;
//   color: #606266;
//   border: 1px solid #dcdfe6;
//   margin: 0 5px;
// }
// .danger-btn {
//   border: none;
//   background: #f56c6c;
//   color: #fff;
// }
</style>

